<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>iview 后台</title>
    <!-- 引入Vue -->
    <script src="./js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./js/iview/iview.css">
    <!-- 引入组件库 -->
    <script src="./js/iview/iview.min.js"></script>
    <script src="./js/vue-router.min.js"></script>
</head>

<body>
    <div class="app" id="app">
        <router-link to="/home">Go to home</router-link>
        <router-link to="/about">Go to about</router-link>

        <router-link to="/dongtai/1">动态路由1</router-link>
        <router-link to="/dongtai/2">动态路由2</router-link>
        <router-link to="/dongtai/3">动态路由3</router-link>
        <router-link to="/dongtai/4">动态路由4</router-link>
	      <transition name="fade" mode="out-in">
	        <router-view class="view"></router-view>
	      </transition>
    </div>
    <template id="t1">
        <div class="layout">
            <Menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo"></div>
                <div class="layout-nav">
                    <Menu-item name="1">
                        <Icon type="ios-navigate"></Icon>
                        导航一
                    </Menu-item>
                    <Menu-item name="2">
                        <Icon type="ios-keypad"></Icon>
                        导航二
                    </Menu-item>
                    <Menu-item name="3">
                        <Icon type="ios-analytics"></Icon>
                        导航三
                    </Menu-item>
                    <Menu-item name="4">
                        <Icon type="ios-paper"></Icon>
                        导航四
                    </Menu-item>
                </div>
            </Menu>
            <Menu mode="horizontal" active-name="1">
                <div class="layout-assistant">
                    <Menu-item name="1">二级导航</Menu-item>
                    <Menu-item name="2">二级导航</Menu-item>
                    <Menu-item name="3">二级导航</Menu-item>
                </div>
            </Menu>
            <div class="layout-breadcrumb">
                <Breadcrumb>
                    <Breadcrumb-item href="#">首页</Breadcrumb-item>
                    <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
                    <Breadcrumb-item>某应用</Breadcrumb-item>
                </Breadcrumb>
            </div>
            <div class="layout-content">
                内容区域
            </div>
            <div class="layout-copy">
                2011-2016 &copy; TalkingData
            </div>
        </div>
    </template>
    <template id="home">
        <div>
            <h1>Home</h1>
            <p>This is the tutorial Home vue-router.</p>
        </div>
    </template>
    <template id="about">
        <div>
            <h1>About</h1>
            <p>This is the tutorial about vue-router.</p>
        </div>
    </template>
    <script>
	    var router = new VueRouter({
	        routes: [
	        	{path: '/home',component: {template: '#home'}}, 
	        	{path: '/about', component: {template: '#about'}},
	        	{path: '/dongtai/:id', component: {template: '<div>User {{ $route.params.id }}</div>'}}
	        ]
	    });


	    var app = new Vue({
	        data: {
	            a1: ''
	        },
	        el: '#app',
	        router: router
	            // template: '#t1'
	    });

	    /* 创建组件构造器  */
	    var Home = Vue.extend({
	        template: '#home',
	        data: function() {
	            return {
	                msg: 'Hello, vue router!'
	            }
	        }
	    })

	    var About = Vue.extend({
	        template: '#about'
	    })
    </script>
</body>

</html>
<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
}

.layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}

.layout-nav {
    width: 420px;
    margin: 0 auto;
}

.layout-assistant {
    width: 300px;
    margin: 0 auto;
    height: inherit;
}

.layout-breadcrumb {
    padding: 10px 15px 0;
}

.layout-content {
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}

.layout-content-main {
    padding: 10px;
}

.layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}
</style>
